<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="themes/pinghsu/header::header('智能客服',null)"></div>
<body>
<div class="main-content customer-service clearfix">
    <div class="chat-container">
        <div class="chat-header">
            <h3>智能客服助手</h3>
            <p>有什么可以帮到您的？</p>
        </div>
        
        <div class="chat-messages" id="chatMessages">
            <div class="message bot">
                <div class="message-content">
                    <p>您好！我是博客系统的智能客服助手，很高兴为您服务。以下是我可以帮您解答的问题：</p>
                    <ul>
                        <li>如何发布文章？</li>
                        <li>如何修改个人资料？</li>
                        <li>文章发布后如何修改？</li>
                        <li>如何添加分类和标签？</li>
                    </ul>
                    <p>请告诉我您需要什么帮助？</p>
                </div>
            </div>
        </div>
        
        <div class="chat-input">
            <input type="text" id="userInput" placeholder="请输入您的问题..." />
            <button id="sendButton" onclick="sendMessage()">发送</button>
        </div>
    </div>
</div>

<style>
    .customer-service {
        display: flex;
        justify-content: center;
        padding: 30px 0;
        min-height: calc(100vh - 300px);
    }
    
    .chat-container {
    margin-top: 100px;
        width: 800px;
        max-width: 100%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .chat-header {
        background-color: #6fa3ef;
        color: white;
        padding: 20px;
        text-align: center;
    }
    
    .chat-header h3 {
        margin: 0;
        font-size: 22px;
    }
    
    .chat-header p {
        margin: 5px 0 0;
        opacity: 0.8;
    }
    
    .chat-messages {
        padding: 20px;
        height: 400px;
        overflow-y: auto;
    }
    
    .message {
        margin-bottom: 15px;
        display: flex;
    }
    
    .message.user {
        justify-content: flex-end;
    }
    
    .message-content {
        max-width: 80%;
        padding: 10px 15px;
        border-radius: 15px;
        background-color: #f1f1f1;
    }
    
    .message.user .message-content {
        background-color: #6fa3ef;
        color: white;
    }
    
    .message.bot .message-content {
        background-color: #f1f1f1;
    }
    
    .chat-input {
        display: flex;
        padding: 15px;
        border-top: 1px solid #eee;
    }
    
    .chat-input input {
        flex: 1;
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 20px;
        outline: none;
    }
    
    .chat-input button {
        margin-left: 10px;
        padding: 10px 20px;
        background-color: #6fa3ef;
        color: white;
        border: none;
        border-radius: 20px;
        cursor: pointer;
    }
    
    .chat-input button:hover {
        background-color: #5a93df;
    }
</style>

<script>
    // 预设问题和回答
    const responses = {
        "如何发布文章": "发布文章很简单！\n1. 登录您的账户\n2. 进入个人中心\n3. 点击"写文章"按钮\n4. 填写文章标题、内容\n5. 选择分类和标签\n6. 点击"发布"按钮\n\n文章就成功发布了！",
        
        "如何修改个人资料": "修改个人资料的步骤：\n1. 登录您的账户\n2. 点击右上角的用户头像\n3. 选择"个人资料"\n4. 修改您的个人信息\n5. 点击"保存"按钮即可",
        
        "文章发布后如何修改": "修改已发布文章：\n1. 登录您的账户\n2. 进入个人中心\n3. 点击"文章管理"\n4. 找到需要修改的文章\n5. 点击"编辑"按钮\n6. 修改完成后点击"保存"",
        
        "如何添加分类和标签": "添加分类和标签：\n1. 在发布或编辑文章时\n2. 在文章编辑页面底部可以看到分类和标签选项\n3. 选择已有的分类或标签\n4. 如需创建新的分类或标签，请先在管理菜单中的"分类管理"或"标签管理"中创建\n\n这样可以更好地组织您的文章内容！"
    };
    
    function sendMessage() {
        const userInput = document.getElementById('userInput');
        const chatMessages = document.getElementById('chatMessages');
        const userMessage = userInput.value.trim();
        
        if (!userMessage) return;
        
        // 添加用户消息
        chatMessages.innerHTML += `
            <div class="message user">
                <div class="message-content">
                    <p>${userMessage}</p>
                </div>
            </div>
        `;
        
        // 自动滚动到底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
        
        // 清空输入框
        userInput.value = '';
        
        // 模拟思考时间
        setTimeout(() => {
            // 生成回答
            let response = "抱歉，我目前无法回答这个问题。您可以尝试换个方式提问，或者联系人工客服获取帮助。";
            
            // 检查是否匹配预设问题
            for (const [key, value] of Object.entries(responses)) {
                if (userMessage.includes(key)) {
                    response = value;
                    break;
                }
            }
            
            // 添加机器人回复
            chatMessages.innerHTML += `
                <div class="message bot">
                    <div class="message-content">
                        <p>${response.replace(/\n/g, '<br>')}</p>
                    </div>
                </div>
            `;
            
            // 自动滚动到底部
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }, 1000);
    }
    
    // 绑定回车键发送消息
    document.getElementById('userInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
</script>

</body>
<div th:replace="themes/pinghsu/footer::footer"></div>
</html>
